<template>
  <div style="margin-top: 10px">
    <a-tooltip placement="leftBottom">
      <template #title>
        <span>支持模糊查询</span>
      </template>
      <a-input-search
          v-model:value="temp"
          placeholder="请输入学生id"
          enter-button
          @search="getPage(1)"
      />
    </a-tooltip>
    <a-table
        :columns="columns"
        :data-source="page.list"
        :pagination="pagination"
        @change="handleTableChange"
    >
      <template #visit_id="{ text }">
        <span> ID: {{ text }} </span>
      </template>
      <template #student_id="{ text }">
        <span>
          {{ text }}
        </span>
      </template>
      <template #visiter_id="{ text }">
        <span>
          {{ text }}
        </span>
      </template>
      <template #count="{ text }">
        <span> 第{{ text }}次咨询 </span>
      </template>
      <template #place_name="{ text }">
        <bank-outlined/>
        <span>
          {{ text }}
        </span>
      </template>

      <template #day="{ text }">
        <span>
          <history-outlined/>
          {{ text }}
        </span>
      </template>

      <template #start_time="{ text }">
        <span>
          {{ text }}
        </span>
      </template>

      <template #end_time="{ text }">
        <span>
          {{ text }}
        </span>
      </template>

      <template #action="{ record }">
        <a @click="openChange(record)">修改日期地点安排</a>
      </template>
    </a-table>

    <a-modal v-model:visible="visible" title="修改时间" @ok="insertTimeInfo">
      <a-form-item label="请选择日期">
        <a-date-picker
            v-model:value="freeTimeNeedsTime"
            :disabled-date="disabledDate"
        />
      </a-form-item>
      <a-form-item label="请选择地点">
        <a-select v-model:value="selectTime.place_name" style="width: 120px">
          <a-select-option value="class01">class01</a-select-option>
          <a-select-option value="class02">class02</a-select-option>
        </a-select>

        <a-button style="margin-left: 15px" @click="getTimeInfo">
          <template #icon>
            <SearchOutlined/>
          </template>
          查询
        </a-button>
      </a-form-item>
      <a-divider/>

      <a-table
          :columns="columns2"
          :data-source="page2.list"
          :pagination="pagination2"
          @change="handleTableChange2"
      >
        <template #time_id="{ text }">
          <span>
            {{ text }}
          </span>
        </template>
        <template #start_time="{ text }">
          <span>
            {{ text }}
          </span>
        </template>
        <template #end_time="{ text }">
          <span>
            {{ text }}
          </span>
        </template>
        <template #action="{ record }">
          <a @click="changeTimeInfo(record)">选择</a>
        </template>
      </a-table>
      <a-form-item label="您选择的配置时间为：">
        {{ updateTimeInfo.time_id }}
      </a-form-item>
    </a-modal>
  </div>
</template>

<script setup>
////////////////////////////////////////////
import {reactive, ref} from "vue";
import {post, setLocalToken} from "@/common";
import {useRouter} from "vue-router";
import {get} from "@/common";
import {message} from "ant-design-vue";
import dayjs from "dayjs";
//import {DownloadOutlined} from "";
////////////////////////////////////////////
const columns = [
  {
    dataIndex: "visit_id", //
    title: "初访ID",
    slots: {
      customRender: "visit_id",
    },
  },
  {
    dataIndex: "student_id", //
    title: "学生ID",
    slots: {
      customRender: "student_id",
    },
  },
  {
    dataIndex: "visiter_id", //
    title: "咨询师ID",
    slots: {
      customRender: "visiter_id",
    },
  },
  {
    dataIndex: "count", //
    title: "咨询轮次",
    slots: {
      customRender: "count",
    },
  },
  {
    dataIndex: "place_name", //
    title: "咨询地点",
    slots: {
      customRender: "place_name",
    },
  },
  {
    dataIndex: "day", //
    title: "日期",
    slots: {
      customRender: "day",
    },
  },
  {
    dataIndex: "start_time", //
    title: "开始时间",
    slots: {
      customRender: "start_time",
    },
  },
  {
    dataIndex: "end_time", //
    title: "结束时间",
    slots: {
      customRender: "end_time",
    },
  },
  {
    title: "操作",
    key: "action",
    slots: {
      customRender: "action",
    },
  },
];

const columns2 = [
  {
    dataIndex: "time_id", //
    title: "配置时间ID",
    slots: {
      customRender: "time_id",
    },
  },
  {
    dataIndex: "start_time", //
    title: "起始时间",
    slots: {
      customRender: "start_time",
    },
  },
  {
    dataIndex: "end_time", //
    title: "结束时间",
    slots: {
      customRender: "end_time",
    },
  },
  {
    title: "操作",
    key: "action",
    slots: {
      customRender: "action",
    },
  },
];

const student = reactive({
  student_id: "",
});

const page = ref({});

const page2 = ref({});

const temp = ref("");

const day = ref();

const disabledDate = (current) => {
  return (
      current &&
      (current < dayjs(day.value).endOf("day") ||
          current > dayjs(day.value).add(7, "day").endOf("day"))
  );
};

const tempDate = reactive({
  date: "",
});

const visible = ref(false);

const openChange = (record) => {
  freeTimeNeedsTime.value = "";
  selectTime.day = "";
  selectTime.place_name = "";
  page2.value = {};
  visible.value = true;
  day.value = record.day;
  updateTimeInfo.visit_id = record.visit_id;
  updateTimeInfo.count = record.count;
};

const selectTime = reactive({
  day: "",
  place_name: "",
});

const freeTimeNeedsTime = ref("");

const updateTimeInfo = reactive({
  count: "",
  place_name: "",
  day: "",
  time_id: "",
  visit_id: "",
});
////////////////////////////////////////////
const pagination = reactive({
  current: 1, //当前页
  pageSize: 5, //每页记录数
  total: 0, //总记录数
  pageSizeOptions: ["2", "3", "5", "10", "20", "30", "100"], //每页记录下拉框的选型
  showSizeChanger: true, //是否展示每页记录数下拉框
  showQuickJumper: true, //是否展示快速跳转
  showTotal: (total, range) => {
    //展示总页数等文字说明信息的
    return (
        "共" +
        total +
        "条记录,当前第" +
        pagination.current +
        "页" +
        (range[1] - range[0] + 1) +
        "条记录"
    );
  },
});

const getPage = (pageNum = 1) => {
  student.pageNum = pageNum;
  student.pageSize = pagination.pageSize;

  student.student_id = "%" + temp.value + "%";

  post("/assister/consultChange/getConsultInfo", student).then((res) => {
    page.value = res.data; //将服务端传来的分页数据赋值予page

    //更新分页引擎
    pagination.current = page.value.current;
    pagination.pageSize = page.value.pageSize;
    pagination.total = page.value.total;

    console.log(res.data.list);
  });

  temp.value = "";
};

const handleTableChange = (pagi, filters, sorter, {currentDataSource}) => {
  pagination.current = pagi.current;
  pagination.pageSize = pagi.pageSize;
  pagination.total = pagi.total;

  getPage(pagination.current);
};
////////////////////////////////////////////
const pagination2 = reactive({
  current: 1, //当前页
  pageSize: 5, //每页记录数
  total: 0, //总记录数
  pageSizeOptions: ["2", "3", "5", "10", "20", "30", "100"], //每页记录下拉框的选型
  showSizeChanger: true, //是否展示每页记录数下拉框
  showQuickJumper: true, //是否展示快速跳转
  showTotal: (total, range) => {
    //展示总页数等文字说明信息的
    return (
        "共" +
        total +
        "条记录,当前第" +
        pagination.current +
        "页" +
        (range[1] - range[0] + 1) +
        "条记录"
    );
  },
});

const getPage2 = (pageNum = 1) => {
  selectTime.pageNum = pageNum;
  selectTime.pageSize = pagination.pageSize;
  selectTime.day = freeTimeNeedsTime.value.format("YYYY-MM-DD");

  post("/assister/consultChange/getFreeTime", selectTime).then((res) => {
    page2.value = res.data; //将服务端传来的分页数据赋值予page

    //更新分页引擎
    pagination2.current = page2.value.current;
    pagination2.pageSize = page2.value.pageSize;
    pagination2.total = page2.value.total;
  });
};

const handleTableChange2 = (pagi, filters, sorter, {currentDataSource}) => {
  pagination2.current = pagi.current;
  pagination2.pageSize = pagi.pageSize;
  pagination2.total = pagi.total;

  getPage2(pagination2.current);
};

const getTimeInfo = () => {
  getPage2(1);
};
///////////////////////////////////////////
const changeTimeInfo = (record) => {
  updateTimeInfo.place_name = selectTime.place_name;
  updateTimeInfo.day = selectTime.day;
  updateTimeInfo.time_id = record.time_id;
};

const insertTimeInfo = () => {
  post("/assister/consultChange/insertTimeInfo", updateTimeInfo).then((res) => {
    if (res.success) {
      message.success(res.message);
      visible.value = false;
      getPage(1);
      updateTimeInfo.visit_id = "";
      updateTimeInfo.count = "";
      updateTimeInfo.place_name = "";
      updateTimeInfo.day = "";
      updateTimeInfo.time_id = "";
    } else {
      message.error(res.message);
      updateTimeInfo.visit_id = "";
      updateTimeInfo.count = "";
      updateTimeInfo.place_name = "";
      updateTimeInfo.day = "";
      updateTimeInfo.time_id = "";
    }
  });
};
</script>

<style>
</style>